<template>
	<view class="live-list">
		<!-- 搜索 -->
		<view class="live-search">
			<input type="text" v-model="search" :placeholder="'\ue607 试试搜 布偶/主播'" confirm-type="search" @confirm="bindConfirm" placeholder-class="input-place" />
		</view>
		<!-- tab -->
		<view class="tab-list">
			<view class="tab-item" v-for="(item, index) in tabs" :key="item.id" :class="{ 'tab-item-active': typeId == item.id }" @click="bindTab(item.id)">{{ item.name }}</view>
		</view>
		<view class="background-box">
			<!-- 正在直播中(列表) -->
			<view class="live-ongoing-list">
				<view class="live-ongoing-item" v-for="(item, index) in warningList" :key="index" @click="bindLive(item.roomid)">
					<image :src="item.headimgurl" mode="aspectFill" class="ongoing-head-img"></image>
					<image :src="'https://nabercat.oss-cn-hangzhou.aliyuncs.com/' + item.img" mode="aspectFill" class="ongoing-main-img"></image>
					<view class="live-ongoing-username">{{ item.name }}</view>
					<view class="notice-time">{{ formatDataThree(item.starttime) }}开播</view>
					<subscribe
						:room-id="item.roomid"
						:width="60"
						:height="20"
						:fontSize="12"
						:backgroundColor="'#fa8384'"
						stop-propagation
						@tap.stop
						@subscribe="onSubscribe"
						class="subscribe-btn"
					></subscribe>
				</view>
			</view>
			<!-- 加载更多 -->
			<uni-load-more :status="status"></uni-load-more>
		</view>
	</view>
</template>

<script>
import { xZhibols } from '@/api/index.js';
import { formatDataThree } from '@/util/time.js';
export default {
	data() {
		return {
			search: '',
			page: 1,
			total: 1, //总页数
			status: 'more', //加载状态
			typeId: 1,
			warningList: [], //预告列表
			tabs: [
				{
					name: '已出窝',
					id: 1
				},
				{
					name: '预售',
					id: 2
				}
			]
		};
	},
	onLoad() {
		this.xZhibols();
	},
	methods: {
		onSubscribe(e) {},
		formatDataThree,
		// tab切换
		bindTab(typeId) {
			this.typeId = typeId;
			this.page = 1;
			this.warningList = [];
			this.search = '';
			this.xZhibols();
		},
		// 搜索
		bindConfirm() {
			this.page = 1;
			this.warningList = [];
			this.xZhibols();
		},
		// 获取预约列表
		async xZhibols() {
			const res = await xZhibols({
				start_time: 2,
				page: this.page,
				keywords: this.search,
				if_take: this.typeId
			});
			this.warningList = this.warningList.concat(res.list);
			this.total = res.total;
			if (this.page == this.total || this.total == 0) {
				this.status = 'noMore';
			} else {
				this.status = 'more';
			}
		},
		// 跳转直播
		bindLive(id) {
			uni.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${id}`
			});
		}
	},
	// 上拉加载
	onReachBottom() {
		if (this.page == this.total) {
			return false;
		}
		this.page += 1;
		this.xZhibols();
	}
};
</script>

<style lang="scss" scoped>
.live-list {
	padding: 30rpx 0;
	.live-search {
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		& > input {
			width: 100%;
			height: 72rpx;
			text-align: center;
			font-size: 28rpx;
			background: #f6f6f6;
			border-radius: 36rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-family: 'iconfont' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
		/deep/.input-place {
			font-size: 24rpx;
			font-family: 'iconfont' !important;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
		}
	}
	.tab-list {
		display: flex;
		margin-bottom: 24rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		.tab-item {
			width: 144rpx;
			height: 50rpx;
			background: #f8f8f8;
			border-radius: 26rpx;
			margin-right: 24rpx;
			color: #333333;
			font-size: 26rpx;
			text-align: center;
			line-height: 50rpx;
		}
		.tab-item-active {
			background: #fa8384;
			color: #ffffff;
		}
	}
	.live-ongoing-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.live-ongoing-item {
			width: 330rpx;
			height: 540rpx;
			background: #ffffff;
			border-radius: 16rpx;
			position: relative;
			margin-bottom: 20rpx;
			text-align: center;
			.ongoing-head-img {
				position: absolute;
				top: 302rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 76rpx;
				height: 76rpx;
				border-radius: 50%;
				border: 4rpx solid #ffffff;
			}
			.ongoing-main-img {
				width: 100%;
				height: 340rpx;
				border-radius: 16rpx 16rpx 0 0;
				margin-bottom: 54rpx;
			}
			.live-ongoing-username {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 8rpx;
			}
			.notice-time {
				font-size: 24rpx;
				font-weight: 500;
				color: #fa8384;
				margin-bottom: 12rpx;
			}
			/deep/.subscribe--live-player-subscribe__btn {
				border-radius: 20rpx !important;
			}
		}
	}
}
.background-box {
	background: #f9f9f9;
	padding: 20rpx 30rpx;
}
</style>
